<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas width="500" height="550"></canvas>

		<div>
			<label>fen:</label><input type="text" name="fen" />
			<input type="button" value="submit" onclick="submit()"/>
		</div>
	</body>
</html>

<script type="text/javascript" src="js/board.js"></script>
<script type="text/javascript" src="js/chess.js"></script>
<script type="text/javascript" src="js/exchange.js"></script>

<script type="text/javascript">
	let chess = new Chess();
	chess.show();

	function submit() {
		try {
			let fen = document.getElementsByName("fen")[0].value;
			let arr = fenToArray(fen);
			let pieces = arrToPieces(arr);
			chess.pieces = pieces;
			chess.show();
		} catch (e) {
			alert(e);
		}
	}
	
	function save(){
		let canvas=document.getElementsByTagName("canvas")[0];
		let data=canvas.toDataURL();
		console.log(data);
		
		let xhr=new XMLHttpRequest();
		xhr.open("POST","https://localhost:5001/Home/Save",false);
		xhr.onreadystatechange=function(){
			if(xhr.status==200&&xhr.readyState==4){
				document.write(xhr.responseText);
			}
		};
		xhr.send(data);
	}
</script>
